<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		#mycan{
			border: 1px solid;
		}
		a{
			text-decoration: none;
		}
	</style>
	<body>
		<p><a href="index.html">五子棋</a></p>
		<p><a href="shijian.html">LED时间</a></p>
		<canvas id="mycan" width="500px" height="500px"></canvas>
		<script type="text/javascript">
			var can=document.getElementById("mycan");
			var bi=can.getContext("2d");
			bi.translate(250,250);
			setInterval("shijian()",1000)
			function shijian(){
			bi.translate(-250,-250);
			bi.clearRect(0,0,500,500);
				bi.beginPath();
			bi.translate(250,250);
			bi.arc(0,0,200,0,2*Math.PI);
			bi.fillStyle="aqua";
			bi.fill();
			bi.beginPath();
			bi.lineWidth=5;
			bi.fillStyle="black";
			bi.moveTo(0,200);
			bi.lineTo(0,180);
			bi.stroke();
			for(var i=1;i<=60;i++){
			bi.beginPath();
			bi.rotate(6*Math.PI/180);
			bi.lineWidth=5;
			bi.fillStyle="black";
			if(i*6%30==0){
			bi.moveTo(0,200);
			bi.lineTo(0,180);	
			}else{
			bi.moveTo(0,200);
			bi.lineTo(0,190);
			}
			bi.stroke();
			}
			bi.translate(-8,8);
			for(var i=1;i<=12;i++){
			bi.beginPath();
			bi.lineWidth=1;
			var x=Math.cos((i*30-90)*Math.PI/180)*160;
			var y=Math.sin((i*30-90)*Math.PI/180)*160;
			bi.font="25px 微软雅黑"
			bi.strokeText(i,x,y);	
			}
			bi.translate(8,-8);
			var time=new Date
			var ss=time.getSeconds();
			var dd=time.getMinutes();
			var hh=time.getHours();
			var nian=time.getFullYear();
			var yue=time.getMonth();
			var tian=time.getDate();
			var xq=time.getDay();
			
			bi.fillRect(-42,80,25,25);
			bi.fillRect(-12,80,25,25);
			bi.fillRect(18,80,25,25);
			
			bi.beginPath();
			var sx=Math.cos((ss*6-90)*Math.PI/180)*140;
			var sy=Math.sin((ss*6-90)*Math.PI/180)*140;
			bi.moveTo(0,0);
			bi.lineTo(sx,sy);
			bi.stroke();
			bi.beginPath();
			bi.lineWidth=3;
			var dx=Math.cos((dd*6+(ss*0.1)-90)*Math.PI/180)*120;
			var dy=Math.sin((dd*6+(ss*0.1)-90)*Math.PI/180)*120;
			bi.moveTo(0,0);
			bi.lineTo(dx,dy);
			bi.stroke();
			bi.beginPath();
			bi.lineWidth=5;
			var dx=Math.cos((hh*30+(ss*0.1)+(dd*0.5)-90)*Math.PI/180)*80;
			var dy=Math.sin((hh*30+(ss*0.1)+(dd*0.5)-90)*Math.PI/180)*80;
			bi.moveTo(0,0);
			bi.lineTo(dx,dy);
			bi.stroke();
			
			bi.beginPath();
			bi.lineWidth=1;
			bi.fillStyle="white";
			bi.font="15px 微软雅黑"
			bi.fillText(ss,22,98);
			bi.fillText(dd,-10,98);
			bi.fillText(hh,-40,98);
			bi.fillText(nian+"年"+yue+"月"+tian+"日"+"星期"+xq,-75,60)
			};
		</script>
	</body>
</html>
